<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<view class="boxes">
				<u-form-item label-width="150" :label-position="labelPosition" label="地址" prop="address">
					<u-input :border="border" placeholder="请输入地址" v-model="model.address" type="textarea"></u-input>
				</u-form-item>
			</view>
			<view class="boxes" v-for="(item, index) in model.orderUserList">

				<view v-if="index" @click="removeContact(index)" class="del">
					<u-icon name="close-circle-fill" color="#ff0000" size="50"></u-icon>
				</view>


				<u-form-item v-if="type==1" :label-position="labelPosition" label="与本人关系" label-width="150">
					{{relationsName}}

				</u-form-item>
				<u-form-item v-else :label-position="labelPosition" label="与本人关系" label-width="150">
					<u-input :border="border" type="select" :select-open="selectShow" v-model="item.relationName"
						placeholder="请选择与本人关系" @click="choiceRelation(index)"></u-input>

				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="姓名">
					<u-input :border="border" placeholder="请输入姓名" v-model="item.cusName" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="身份证号">
					<u-input :border="border" placeholder="请输入身份证号" v-model="item.cardNo" type="text"></u-input>
				</u-form-item>
			</view>


			<u-button :ripple="true" ripple-bg-color="#909399" v-if="type==2" :hair-line="false" class="add" type="info"
				@click="addContact">
				<u-icon name="plus" color="#909399" size="28"></u-icon>添加联系人
			</u-button>
		</u-form>
		<u-button class="u-m-t-30" type="primary" @click="submit">提交</u-button>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>

	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				orderNo: '',
				relationsName: "",
				type: 1,

				model: {

					address: '',
					orderUserList: [{
						cusName: '',
						cardNo: '',
						relation: '',
						relationName:'',
					}]
				},
				selectList: [{
						label: '本人',
						value: '1'
					},
					{
						label: '子女',
						value: '2'
					},
					{
						label: '母亲（岳母）',
						value: '3'
					},
					{
						label: '父亲（岳父）',
						value: '4'
					}, {
						label: '妻子',
						value: '5'
					}, {
						label: '丈夫',
						value: '6'
					}
				],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}, ],
					idcode: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.idCard(value);
							},
							message: '身份证输入有误，请从新输入！',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],


					relations: [{
						required: true,
						message: '请选择与本人关系',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: ['change', 'blur'],
					}],


				},
				inx: 0,
				border: false,
				check: false,
				selectStatus: 'close',


				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
				parm:'',
				mobile:'',
				orderNo:''
			};
		},
		onLoad(e) {
			
			this.type = e.type
			this.parm = e.parm;
			this.orderNo= e.orderNo
			if (e.type == 1) {
				this.relationsName = '本人'
				this.model.orderUserList[0].relation = '1'
			}



			this.$u.api.getOrderUser({
					"orderNo": e.orderNo
				})
				.then(res => {
					this.model.address = res.data.address || ''
					this.model.orderUserList = (res.data.orderUserList.length>0 ?res.data.orderUserList:[{
						cusName: '',
						cardNo: '',
						relation: '',
					}]) 
					
					this.model.orderUserList?.map(r=>{
						console.log(r,333);
						
						this.$set(r,'relationName',this.selectList.filter(s=>s.value==r.relation)[0]?.label)
					})
					
					console.log(e.type,222222222);
					
					if (e.type == 1) {
						this.model.orderUserList[0].relation = '1'
					}
					console.log(res.data, 9999);
				});
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},

		methods: {
			choiceRelation(index) {
				this.inx = index
				this.selectShow = true
			},
			addContact() {

				this.model.orderUserList.push({
					cusName: '',
					cardNo: '',
					relation: '',
				});
			},
			removeContact(index) {
				this.model.orderUserList.splice(index, 1);
			},
			submit() {

				if (!this.model.address) {
					uni.showToast({
						title: '请填写地址',
						icon: 'none'
					});
					return;
				}
					console.log(this.model.orderUserList,444566);

				if (this.model.orderUserList.some(contact => !contact.cusName || !contact.cardNo || !contact.relation)) {
					uni.showToast({
						title: '请填写完整的联系人信息',
						icon: 'none'
					});
					return;
				}




				this.$u.api.saveOrderUser({
						"address": this.model.address,
						orderNo: this.orderNo,
						orderUserList: this.model.orderUserList
					})
					.then(res => {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						
						uni.navigateTo({
							url:"/pages/sys/msg/index?parm="+this.parm +'&tab='+2
						})
						console.log(res.data, 9999);
					});

			},

			// 选择商品类型回调
			selectConfirm(e) {
				this.model.relation = '';
				e.map((val, index) => {


					this.model.orderUserList[this.inx].relationName = val.label
					this.model.orderUserList[this.inx].relation = val.value
					
			

				})
			},

			errorChange(index) {
				if (index == 0) this.errorType = ['message'];
				if (index == 1) this.errorType = ['toast'];
				if (index == 2) this.errorType = ['border-bottom'];
				if (index == 3) this.errorType = ['border'];
			}
		}
	};
</script>
<style>
	page {
		background: #F0F1F2;

	}
</style>
<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}

	.boxes {
		border-radius: 10px;
		background: #fff;
		margin: 0 0 15px 0;
		padding: 0 15px;
		position: relative;

		.del {
			position: absolute;
			right: -10px;
			top: -10px;
		}

	}

	.add {
		border: 1rpx solid #e8e8e8 !important;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
